<!DOCTYPE html>
<html>

	<head>
		<title>Unboxing</title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<style>
			html,
			body {
				padding: 0;
				margin: 0;
			}
			
			.main {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
		</style>

		<script>
			htconfig = {
				Style: {
					'edge.width': 1
				}
			};
		</script>
		<script src="../lib/core/ht.js"></script>
		<script src="../lib/plugin/ht-modeling.js"></script>
		<script src="../lib/plugin/ht-form.js"></script>
		<script>
			ht.Default.setImage('DieTexture', '../img/pic.png');
			ht.Default.setImage('Ground', '../img/timg.png');
			ht.Default.graph3dViewCenter = [0, -500, 0];
			ht.Default.graph3dViewEye = [0, 2000, 2000];

			function init() {
				dm = new ht.DataModel();

				/**
				 * double sqrt = System.Math.Sqrt(System.Math.Pow(startAirportPos.x - endAirportPos.x, 2) + 
				 * System.Math.Pow(startAirportPos.y - endAirportPos.y, 2) + System.Math.Pow(startAirportPos.z - endAirportPos.z, 2));
				 * return System.Math.Abs(sqrt);
				 */

				graph3dView = new ht.graph3d.Graph3dView(dm);
				//				graph3dView.reset = function() {
				//					// 复位
				//				};

				// 禁止部分平移
				graph3dView.isMovable = function(data) {
					return false;
				};
				//				graph3dView.setPannable(true);

				// 平移 -- 默认
				//				graph3dView.getMoveMode = function(event) {
				//					return 'xyz';
				//				};

				// 单击事件
				graph3dView.addInteractorListener(function(e) {
					if(e.kind === 'clickData') {
						console.log(e.data + '被单击');
						var id = e.data._id;
						var selectedMap = graph3dView._dataModel._selectionModel._map;
						var selectedEle = [];
						for(var key in selectedMap) {
							selectedEle.push(selectedMap[key]._id);
						}
						console.log(selectedEle);
					}
				});

				view = graph3dView.getView();
				view.className = 'main';
				document.body.appendChild(view);
				window.addEventListener('resize', function(e) {
					graph3dView.iv();
				}, false);

				//				graph3dView.setEye(0, 2000, 2000);
				//				graph3dView.setCenter(0, 0, 0);

				//				graph3dView.setGridColor("yellow");
				graph3dView.setGridVisible(true);
				//				graph3dView.setGridVisible(false);

				ground = createGround();
				bottom = createBottom();

				node1 = createNode(-300);
				node2 = createNode(700);

				currentNode = null;
				sm = dm.sm();
				sm.ms(function(e) {
					currentNode = sm.ld();
				});

				sm.ss(ground);
				sm.ss(bottom);
				sm.ss(node1);

				graph3dView.getWireframe = function(data) {
					return null;
				};
			}

			function createGround() {
				var node = new ht.CSGBox();
				dm.add(node);
				node.s3(0, 2, 0);
				node.p3(0, 1, 0);
				node.s({
					'all.image': 'Ground',
				});
				node.a({
					'frame.size': 1,
					'frame.rotation': 0
				});
				node.setSize(2400, 2400);
				return node;
			}

			function createBottom() {
				var node = new ht.CSGBox();
				dm.add(node);
				node.s3(0, 0, 0);
				node.p3(0, 0, 0);
				node.s({
					'all.color': 'brown',
				});
				node.a({
					'frame.size': 1,
					'frame.rotation': 0
				});
				node.setSize(2400, 2400);
				return node;

			}

			function createNode(x) {
				var node = new ht.CSGBox();
				dm.add(node);
				node.s3(20, 180, 20);
				node.p3(x, 90, 0);
				node.s({
					'all.image': 'DieTexture',
				});
				node.a({
					'frame.size': 1,
					'frame.rotation': 0
				});
				return node;
			}
		</script>
	</head>

	<body onload="init();"></body>

</html>